<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Links - jQuery Mobile Demos</title>
    <link rel="stylesheet" href="../../css/themes/default/jquery.mobile-1.3.1.min.css">
    <link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
    <link rel="shortcut icon" href="../../favicon.ico">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <script src="../../js/jquery.js"></script>
    <script src="../../_assets/js/index.js"></script>
    <script src="../../js/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="true">

<div data-role="header" class="jqm-header">
<h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a>
</h1>
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>

<div class="jqm-search">
<ul class="jqm-list">
<li data-section="Widgets" data-filtertext="accordions collapsible sets content formatting grouped inset mini"><a
        href="widgets/accordions/">Accordion</a></li>

<li data-section="Widgets" data-filtertext="ajax navigation navigate event method"><a href="widgets/navigation/"
                                                                                      data-ajax="false">AJAX
    Navigation</a></li>

<li data-section="Widgets"
    data-filtertext="autocomplete filter reveal listviews remote listviewbeforefilter placeholder"><a
        href="widgets/autocomplete/" data-ajax="false">Autocomplete</a></li>

<li data-section="Widgets" data-filtertext="buttons inputs forms inline theme grouped icons mini disabled"><a
        href="widgets/buttons/" data-ajax="false">Buttons</a></li>

<li data-section="Widgets" data-filtertext="checkboxes checkboxradio inputs forms mini disabled"><a
        href="widgets/checkbox/">Checkboxes</a></li>

<li data-section="Widgets" data-filtertext="collapsibles content formatting"><a href="widgets/collapsibles/"
                                                                                data-ajax="false">Collapsibles</a></li>

<li data-section="Widgets" data-filtertext="controlgroups selects checkboxradio buttons horizontal vertical"><a
        href="widgets/controlgroups/">Controlgroup</a></li>

<li data-section="Widgets" data-filtertext="dialogs modal popups"><a href="widgets/dialog/">Dialogs</a></li>

<li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a
        href="widgets/fixed-toolbars/">Fixed toolbars</a></li>

<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a
        href="widgets/sliders/switch.html" data-ajax="false">Flip switch toggle</a></li>

<li data-section="Widgets" data-filtertext="footer toolbars footers sections"><a href="widgets/footers/">Footer
    toolbar</a></li>

<li data-section="Widgets"
    data-filtertext="forms inputs slider button range toggle switch label disabled accessible fieldcontains elements"><a
        href="widgets/forms/">Form elements</a></li>

<li data-section="Widgets" data-filtertext="grids columns blocks content formatting rwd responsive"><a
        href="widgets/grids/">Grids</a></li>

<li data-section="Widgets" data-filtertext="header toolbars fixed fullscreen sections"><a href="widgets/headers/">Header
    toolbar</a></li>

<li data-section="Widgets" data-filtertext="icons buttons disc position"><a href="widgets/icons/">Icons</a></li>

<li data-section="Widgets" data-filtertext="links navigation ajax prefetch cache"><a href="widgets/links/">Links</a>
</li>

<li data-section="Widgets" data-filtertext="listviews thumbnails icons nested split button collapsible ul ol"><a
        href="widgets/listviews/" data-ajax="false">Listviews</a></li>

<li data-section="Widgets" data-filtertext="ajax loader overlay spinner pages"><a href="widgets/loader/"
                                                                                  data-ajax="false">Loader overlay</a>
</li>

<li data-section="Widgets" data-filtertext="navbars navmenu toolbars links icons footer header"><a
        href="widgets/navbar/" data-ajax="false">Navbar</a></li>

<li data-section="Widgets" data-filtertext="navbars persistent header footer links navmenu"><a
        href="widgets/fixed-toolbars/footer-persist-a.html">Navbar, persistent</a></li>

<li data-section="Widgets" data-filtertext="pages single multipage templates ajax nav"><a
        href="widgets/pages/">Pages</a></li>

<li data-section="Widgets"
    data-filtertext="panels sliding nav modal transition display reveal overlay push rwd responsive"><a
        href="widgets/panels/">Panels <span class="ui-li-count">New</span></a></li>

<li data-section="Widgets"
    data-filtertext="popup dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a
        href="widgets/popup/">Popup</a></li>

<li data-section="Widgets" data-filtertext="radiobuttons checkboxradio inputs forms disabled grouped"><a
        href="widgets/radiobuttons/">Radio buttons</a></li>

<li data-section="Widgets" data-filtertext="selectmenus custom native multiple optgroup disabled forms"><a
        href="widgets/selects/">Select</a></li>

<li data-section="Widgets" data-filtertext="slider, single sliders range inputs forms disabled"><a
        href="widgets/sliders/" data-ajax="false">Slider, single</a></li>

<li data-section="Widgets" data-filtertext="slider, dual range sliders rangesliders inputs forms disabled"><a
        href="widgets/sliders/rangeslider.html" data-ajax="false">Slider, dual range <span
        class="ui-li-count">New</span></a></li>

<li data-section="Widgets" data-filtertext="tables column th td toggle responsive tables rwd hide show tabular"><a
        href="widgets/table-column-toggle/">Table, column toggle <span class="ui-li-count">New</span></a></li>

<li data-section="Widgets" data-filtertext="tables reflow th td responsive rwd columns tabular"><a
        href="widgets/table-reflow/">Table, reflow <span class="ui-li-count">New</span></a></li>

<li data-section="Widgets"
    data-filtertext="text inputs textarea numeric email tel file date time month clear pattern placeholder forms"><a
        href="widgets/textinputs/">Text inputs & textarea</a></li>

<li data-section="Widgets" data-filtertext="page transitions animated pages ajax navigation flip slide fade pop"
    data-ajax="false"><a href="widgets/transitions/" data-ajax="false">Transitions</a></li>

<li data-role="list-divider">Collapsibles</li>

<li data-section="Demo Showcase" data-filtertext="dynamic collapsible set accordion append expand"><a
        href="examples/collapsibles/dynamic-collapsible.html" data-ajax="false">Dynamic collapsible</a></li>

<li data-role="list-divider">Controlgroups</li>

<li data-section="Demo Showcase" data-filtertext="dynamic controlgroup buttons selects checkboxes forms"><a
        href="examples/controlgroups/dynamic-controlgroup.html" data-ajax="false">Dynamic controlgroup</a></li>

<li data-role="list-divider">Listviews</li>

<li data-section="Demo Showcase" data-filtertext="grid listview responsive grids responsive listviews lists ul"><a
        href="examples/listviews/grid-listview.html" data-ajax="false">Grid Listview</a></li>

<li data-section="Demo Showcase" data-filtertext="autodividers anchor jump scroll linkbars listviews lists ul"><a
        href="examples/listviews/autodividers-linkbar.html" data-ajax="false">Autodividers Linkbar</a></li>

<li data-section="Demo Showcase" data-filtertext="listviews autodividers selector autodividersselector lists ul ol"><a
        href="examples/listviews/autodividers-selector.html" data-ajax="false">Autodividers Selector</a></li>

<li data-role="list-divider">Navigation</li>

<li data-section="Demo Showcase" data-filtertext="backbone and require.js example navigation router"><a
        href="examples/backbone-require/index.html" data-ajax="false">Backbone and Require.js example</a></li>

<li data-section="Demo Showcase" data-filtertext="server redirection with server-side support php"><a
        href="examples/redirect/" data-ajax="false">Redirection with server-side support</a></li>

<li data-role="list-divider">Panels</li>

<li data-section="Demo Showcase"
    data-filtertext="panel styling slide panels sliding panels shadow rwd responsive breakpoint"><a
        href="examples/panels/panel-styling.html" data-ajax="false">Panel styling</a></li>

<li data-section="Demo Showcase" data-filtertext="open panel on swipe panels left right"><a
        href="examples/panels/panel-swipe-open.html" data-ajax="false">Open panel on swipe</a></li>

<li data-role="list-divider">Popups</li>

<li data-section="Demo Showcase" data-filtertext="dynamic popups popup images lightbox"><a
        href="examples/popups/dynamic-popup.html" data-ajax="false">Dynamic popup</a></li>

<li data-section="Demo Showcase" data-filtertext="arrow popups popover"><a href="examples/popups/arrow.html"
                                                                           data-ajax="false">Popup with arrow</a></li>

<li data-role="list-divider">Responsive Tables</li>

<li data-section="Demo Showcase" data-filtertext="responsive tables reflow stack custom styles"><a
        href="examples/tables/movie-list.html" data-ajax="false">Reflow: Custom styles</a></li>

<li data-section="Demo Showcase" data-filtertext="responsive tables reflow heading groups rwd breakpoint"><a
        href="examples/tables/financial-grouped-reflow.html" data-ajax="false">Reflow: Heading groups</a></li>

<li data-section="Demo Showcase" data-filtertext="responsive tables reflow refresh method dynamically inject data"><a
        href="examples/tables/reflow-refresh.html" data-ajax="false">Reflow: Refresh method</a></li>

<li data-section="Demo Showcase"
    data-filtertext="responsive tables column toggle hide rwd breakpoint customization options"><a
        href="examples/tables/movie-list-toggle-options.html" data-ajax="false">Column toggle: Customization options</a>
</li>

<li data-section="Demo Showcase" data-filtertext="responsive tables column toggle heading groups rwd breakpoint"><a
        href="examples/tables/financial-grouped-columns.html" data-ajax="false">Column toggle: Heading groups</a></li>

<li data-section="Demo Showcase"
    data-filtertext="responsive tables column toggle refresh method dynamically inject data"><a
        href="examples/tables/columntoggle-refresh.html" data-ajax="false">Column toggle: Refresh method</a></li>

<li data-section="Demo Showcase"
    data-filtertext="responsive tables table column toggle phone comparison rwd breakpoint"><a
        href="examples/tables/phone-compare.html" data-ajax="false">Column toggle demo: Phone comparison</a></li>

<li data-role="list-divider">Sliders</li>

<li data-section="Demo Showcase" data-filtertext="slider tooltip handle value extension input range sliders forms"><a
        href="examples/slider/tooltip.html" data-ajax="false">Tooltip extension</a></li>

<li data-role="list-divider">Swipe</li>

<li data-section="Demo Showcase" data-filtertext="swipe to navigate page transitions navigation"><a
        href="examples/swipe/swipe-page.html" data-ajax="false">Swipe to navigate</a></li>

<li data-section="Demo Showcase" data-filtertext="swipe to delete list item listviews lists ul ol"><a
        href="examples/swipe/swipe-list.html" data-ajax="false">Swipe to delete list item</a></li>

<li data-role="list-divider">Forms</li>

<li data-section="Questions & Answers" data-filtertext="CSS styles apply widget scope wrap selector customize"><a
        href="faq/question-template.html">Why won't my CSS styles apply correctly to a widget?</a></li>

<li data-section="Questions & Answers" data-filtertext="form update value enhance pageinit refresh"><a
        href="faq/updating-the-value-of-enhanced-form-elements-does-not-work.html">Updating the value of enhanced form
    elements does not work.</a></li>

<li data-section="Questions & Answers"
    data-filtertext="HTML 5 inputs appearance keyboard picker calendar date time slider file color"><a
        href="faq/my-html-5-inputs-look-different-in-browsers.html">My HTML 5 inputs look different across devices and
    browsers.</a></li>

<li data-section="Questions & Answers" data-filtertext="range search inputs slider number text degrade"><a
        href="faq/my-range-search-input-type-is-being-changed.html">My range or search inputs are being change to
    number/text.</a></li>

<li data-section="Questions & Answers" data-filtertext="custom select popup dialog logic"><a
        href="faq/sometimes-custom-select-shows-as-dialog-popup.html">Sometimes my custom select shows as a popup other
    times its a dialog.</a></li>

<li data-section="Questions & Answers" data-filtertext="disable button issue class method"><a
        href="faq/disabling-a-button-does-not-work.html">Disabling a button does not work.</a></li>

<li data-section="Questions & Answers" data-filtertext="fixed toolbar header footer fullscreen select input bug issue">
    <a href="faq/controls-in-header-footer.html">Controls in my fixed header or footer are not responding or behave
        erratically.</a></li>

<li data-role="list-divider">Pages</li>

<li data-section="Questions & Answers"
    data-filtertext="head load scripts styles pageinit onload pagebeforecreate ajax nav pages"><a
        href="faq/scripts-and-styles-not-loading.html">Why aren't my scripts and styles loading?</a></li>

<li data-section="Questions & Answers" data-filtertext="document.ready onload paginit DOM ready on ready scripts "><a
        href="faq/dom-ready-not-working.html">Why isn't DOM ready working for my scripts?</a></li>

<li data-section="Questions & Answers" data-filtertext="ajax nav load page mobile.loadpage"><a
        href="faq/how-do-i-load-a-page.html">How do I load a page?</a></li>

<li data-section="Questions & Answers" data-filtertext="ajax nav multi page document load"><a
        href="faq/why-is-only-the-first-page-loaded.html">Why is only the first page of my multi page document
    loaded?</a></li>

<li data-section="Questions & Answers" data-filtertext="pass url query params ajax nav"><a
        href="faq/pass-query-params-to-page.html">I'm trying to pass query params to a page but it's not working?</a>
</li>

<li data-section="Questions & Answers" data-filtertext="hash pass parameters information ajax nav"><a
        href="faq/pass-via-the-hash-to-page.html">I'm trying to pass information via the hash but it's not working?</a>
</li>

<li data-section="Questions & Answers" data-filtertext="application cache status error isLocal ajax nav"><a
        href="faq/the-application-cache-is-not-working.html">I'm trying to use the application cache but it's not
    working.</a></li>

<li data-section="Questions & Answers"
    data-filtertext=">create refresh event trigger pageInit refresh method content injected page not enhanced."><a
        href="faq/injected-content-is-not-enhanced.html">Content injected into a page is not enhanced.</a></li>

<li data-section="Questions & Answers" data-filtertext=">create trigger event pageInit injected HTML"><a
        href="faq/triggering-create-on-injected-content-does-not-work.html">Triggering create on injected HTML does not
    work.</a></li>

<li data-section="Questions & Answers" data-filtertext="auto-enhance element stop preventnative role none"><a
        href="faq/how-can-i-stop-auto-enhancement-of-elements.html">How can I stop JQM from auto-enhancing an
    element?</a></li>

<li data-section="Questions & Answers"
    data-filtertext="auto-enhance block container parent stop preventnative role none"><a
        href="faq/how-can-i-stop-auto-enhancement-of-a-block-of-elements.html">How can I stop JQM from enhancing a block
    of elements?</a></li>

<li data-section="Questions & Answers" data-filtertext="page title ajax nav head"><a
        href="faq/how-do-i-control-page-titles.html">How do I control page titles?</a></li>

<li data-section="Questions & Answers" data-filtertext="ajax nav load page loadPage"><a
        href="faq/how-do-i-load-a-page.html">How do I load a page?</a></li>

<li data-role="list-divider">Events</li>

<li data-section="Questions & Answers"
    data-filtertext="touch mouse events vmouseover, vmousedown, vmousemove, vmouseup, vclick, vmousecancel"><a
        href="faq/how-do-i-use-touch-mouse-events.html">How do I use touch and mouse events?</a></li>

<li data-role="list-divider">Theme and styling</li>

<li data-section="Questions & Answers"
    data-filtertext="theme swatch css themeroller customize icons colors fonts style"><a
        href="faq/how-does-theming-work.html">How does theming work?</a></li>

<li data-role="list-divider">Apps</li>

<li data-section="Questions & Answers" data-filtertext="How do I need to configure PhoneGap Cordova?"><a
        href="faq/how-configure-phonegap-cordova.html">How do I need to configure PhoneGap/Cordova?</a></li>
<!--
<li data-role="list-divider">Navigation</li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/nav-is-acting-erraticly.html">The nav is acting erratically!</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/deep-links-dont-work.html">Following a deep link ( a link to scroll to and id ) does not work.</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/scripts-css-only-works-on-first-page-or-refresh.html">My script / css only works on first page or on refresh.</a></li>
<li data-role="list-divider">Widgets</li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/cloned-content-double-enhanced.html">Cloning a widget or enhanced for element and enhancing causes "double" enhancement</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/cloned-content-does-not-update.html">Cloned widget or enhanced element does not update</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/data-enhance-false-does-not-work.html">Setting data-enhance="false" does not work.</a></li>

<li data-role="list-divider">General</li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/selecting-element-by-id-not-working.html">Selecting elements by id only works sometimes or on first page!</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/global-config-settings-ignored.html">The global configuration settings i set are being ignored.</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/custom-css-is-ignored.html">My custom css is ignored.</a></li>

<li data-role="list-divider">Events</li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/swipe-triggered-when-scrolling.html">Swipe triggered when scrolling.</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/document-ready-not-working.html">Document ready ignored after first page.</a></li>

<li data-role="list-divider">Theming &amp; custom styles</li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/#">How do I add custom icons?</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/#">How do I add remove the circle behind the icons?</a></li>
-->

</ul>
</div>

</div>
<!-- /header -->

<div data-role="content" class="jqm-content">

    <h1>Links <a href="http://api.jquerymobile.com/grid-layout/" data-ajax="false" data-role="button" data-inline="true"
                 data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">API</a></h1>

    <p class="jqm-intro">jQuery Mobile is designed to work with standard page link conventions and layers the AJAX
        navigation on top for maximum compatibility.
    </p>

    <h2>Linking pages</h2>

    <p>You can link pages and assets as you normally would, and jQuery Mobile will automatically handle page requests in
        a single-page model, using AJAX when possible. When AJAX isn't possible (such as a non-same-domain url, or if
        specified using certain attributes on the link), a normal http request is used instead.</p>

    <p>The goal of this nav model is to allow developers to create websites using best practices &mdash; where ordinary
        links will "just work" without any special configuration &mdash; while creating a rich, native-like experience
        that can't be achieved with standard HTTP requests.</p>

    <h2>Default link behavior: AJAX</h2>

    <p>To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded
        via AJAX. To do this unobtrusively, the framework parses the link's <code>href</code> to formulate an AJAX
        request (Hijax) and displays the loading spinner. All this is done automatically by jQuery Mobile.</p>

    <p>If the AJAX request is successful, the new page content is added to the DOM, all mobile widgets are
        auto-initialized, then the new page is animated into view with a page transition.</p>

    <p>If the AJAX request fails, the framework will display a small error message overlay (styled in the "e" swatch)
        that disappears after a brief time so this doesn't break the navigation flow. View an <a href="notapage.html">example
            of the error message</a>.</p>

    <p><strong>Note:</strong> You cannot link <strong>to</strong> a multipage document with AJAX navigation active
        because the framework will only load the first page it finds, not the full set of internal pages. In these
        cases, you must link without AJAX (see next section) for a full page refresh to prevent potential hash
        collisions. There is currently a <a href="https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget"
                                            rel="external">subpage plugin</a> that makes it possible to load in
        multi-page documents.</p>

    <div data-demo-html="true">
        <p>Example:</p>
        <a href="../../../">To the homepage, with AJAX</a>
    </div>
    <!--/demo-html -->

    <h2>Linking without AJAX</h2>

    <p>Links that point to other domains or that have <code>rel="external"</code>, <code>data-ajax="false"</code> or
        <code>target</code> attributes will not be loaded with AJAX. Instead, these links will cause a full page refresh
        with no animated transition. Both attributes (<code>rel="external"</code> and <code>data-ajax="false"</code>)
        have the same effect, but a different semantic meaning: <code>rel="external"</code> should be used when linking
        to another site or domain, while <code>data-ajax="false"</code> is useful for simply opting a page within your
        domain from being loaded via AJAX. Because of security restrictions, the framework always opts links to external
        domains out of the AJAX behavior.</p>

    <div data-demo-html="true">
        <p>Examples:</p>

        <p><a href="../../../" data-ajax="false">To the homepage, no AJAX</a></p>

        <p><a href="http://www.google.com" rel="external">Google</a></p>
    </div>
    <!--/demo-html -->

    <p>In version 1.1, we added support for using <code>data-ajax="false"</code> on a parent container which allows you
        to exclude a large number of links from the AJAX navigation system. This avoids the need to add this attribute
        to every link in a container. To activate this functionality, <code>$.mobile.ignoreContentEnabled</code> must be
        set to <code>true</code> because this feature adds overhead we don't want to enable by default.</p>

    <div data-demo-html="true">
        <ul data-role="listview" data-ajax="false" data-inset="true" data-theme="d">
            <li data-role="list-divider">All links are non-AJAX</li>
            <li><a href="../accordions/">Accordion</a></li>
            <li><a href="../ajax-nav/">AJAX Navigation</a></li>
            <li><a href="../autocomplete/">Autocomplete</a></li>
        </ul>
    </div>
    <!--/demo-html -->

    <p>Note: When building a jQuery Mobile application where the AJAX navigation system is disabled globally or
        frequently disabled on individual links, we recommend disabling the <code>$.mobile.pushStateEnabled</code>
        global configuration option to avoid inconsistent navigation behavior in some browsers.</p>

    <h2>Linking within a multi-page document</h2>

    <p>A single HTML document can contain one or many "page" containers simply by stacking multiple divs with a <code>data-role</code>
        of <code>"page"</code>. This allows you to build a small site or application within a single HTML document;
        jQuery Mobile will simply display the first "page" it finds in the source order when the page loads.</p>

    <p>If a link in a <a href="../pages/">multi-page document</a> points to an anchor (<code>#foo</code>), the framework
        will look for a page wrapper with that id (<code>id="foo"</code>). If it finds a page in the HTML document, it
        will transition the new page into view. You can seamlessly navigate between local, internal "pages" and external
        pages in jQuery Mobile. Both will look the same to the end user except that external pages will display the AJAX
        spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button
        support, deep-linking and bookmarking.</p>

    <p>It's important to note that if you are linking from a mobile page that was loaded via AJAX to a page that
        contains multiple internal pages, you need to add a <code>rel="external"</code> or
        <code>data-ajax="false"</code> to the link. This tells the framework to do a full page reload to clear out the
        AJAX hash in the URL. This is critical because AJAX pages use the hash (<code>#</code>) to track the AJAX
        history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the
        hash between these two modes.</p>

    <p>For example, a link to a page containing multiple internal pages would look like this:</p>

    <code>&lt;a href=&quot;multipage.html&quot; rel=&quot;external&quot;&gt;Multi-page link&lt;/a&gt;</code>

    <h2>"Back" button links</h2>

    <p>If you use the attribute <code>data-rel="back"</code> on an anchor, any clicks on that anchor will mimic the back
        button, going back one history entry and ignoring the anchor's default <code>href</code>. This is particularly
        useful when generating "back" buttons with JavaScript, such as a button to close a dialog. </p>

    <p>When using this feature in your source markup, although browsers that support this feature will not use the
        specified <code>href</code> attribute, be sure to still provide a meaningful value that actually points to the
        URL of the referring page to allow the feature to work for users in C-Grade browsers. If users can reach this
        page from more than one referring pages, specify a sensible <code>href</code> so that the navigation remains
        logical for all users. </p>

    <p>Also, please keep in mind that if you just want a reverse transition without actually going back in history, you
        should use the <code>data-direction="reverse"</code> attribute instead.
        Note: <code>data-direction="reverse"</code> is meant to simply run the backwards version of the transition that
        will run on that page change, while <code>data-rel="back"</code> makes the link functionally equivalent to the
        browser's back button and all the standard back button logic applies. Adding
        <code>data-direction="reverse"</code> to a link with <code>data-rel="back"</code> <b>will not</b> reverse the
        reversed page transition and produce the "normal" version of the transition. </p>

    <h2>Redirects and linking to directories</h2>

    <p>When linking to directory indexes (such as href="typesofcats/" instead of href="typesofcats/index.html"), you
        must provide a trailing slash. This is because jQuery Mobile assumes the section after the last "/" character in
        a url is a filename, and it will remove that section when creating base urls from which future pages will be
        referenced.</p>

    <p>However, you can work around this issue by returning your page div with a <code>data-url</code> attribute already
        specified. When you do this, jQuery Mobile will use that attribute's value for updating the URL, instead of the
        url used to request that page. This also allows you to return urls that change as the result of a redirect, for
        example, you might post a form to "/login.html" but return a page from the url "/account" after a successful
        submission. This tool allows you to take control of the jQuery Mobile history stack in these situations. </p>

    <h2>Link notes</h2>

    <p>The non-standard environment created by jQuery Mobile's page navigation model introduces some conditions of which
        you should be aware when building pages:</p>

    <ul class="jqm-list">
        <li><p>When linking to directories, without a filename URL, (such as <code>href="typesofcats/"</code> instead of
            <code>href="typesofcats/index.html"</code>), you must provide a trailing slash. This is because jQuery
            Mobile assumes the section after the last "/" character in a URL is a filename, and it will remove that
            section when creating base URLs from which future pages will be referenced.</p></li>
        <li><p>Documents loaded via AJAX will select the first page in the DOM of that document to be loaded as a jQuery
            Mobile page element. As a result the developer must make sure to manage the <code>id</code> attributes of
            the loaded page and child elements to prevent confusion when manipulating the DOM.</p></li>
        <li><p>If you link to a multipage document, you must use a <code>data-ajax="false"</code> attribute on the link
            to cause a full page refresh due to the limitation above where we only load the first page node in an AJAX
            request due to potential hash collisions. There is currently a <a
                    href="https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget" rel="external">subpage plugin</a>
            that makes it possible to load in multipage documents. </p></li>
        <li><p>While linking pages inside a multipage template, you should not use the <code>data-ajax="false"</code>
            attribute as it is of no use and will only interfere with the transition settings. </p></li>
        <li><p>The <code>"ui-page"</code> key name used in sub-hash URL references can be set to any value you'd like,
            so as to blend into your URL structure. This value is stored in <code>jQuery.mobile.subPageUrlKey</code>.
        </p></li>
        <li><p>When traveling back to a previously loaded jQuery Mobile document from an external <b>or</b> internal
            document with the push state plugin enabled, some browsers load and trigger the <code>popstate</code> event
            on the wrong document or for the wrong reasons (two edge cases recorded so far). If you are regularly
            linking to external documents and find the application behaving erratically try disabling pushstate support.
        </p></li>
        <li><p>jQuery Mobile does not support query parameter passing to internal/embedded pages but there are two
            plugins that you can add to your project to support this feature. There is a lightweight <a
                    href="https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params" rel="external">page
                params plugin</a> and a more fully featured <a href="https://github.com/azicchetti/jquerymobile-router"
                                                               rel="external">jQuery Mobile router plugin</a> for use
            with backbone.js or spine.js. A newer plugin called <a
                    href="https://github.com/1Marc/jquery-mobile-routerlite" rel="external">routerlite</a> keeps it
            simple with just four methods: routeinit, routechange, pageinit and pagechange.</p></li>
        <li><p>Some external applications (notably Facebook's OAuth implementation) modify their response URL in such a
            way that interferes with jQuery Mobile. In particular, Facebook appends <code>#_=_</code> to the end of the
            callback. Currently the best solution for this is to remove it from the location hash before jQuery Mobile
            loads using something like: <code>if (window.location.hash == "#_=_") window.location.hash = ""; </code>.
            jQuery Mobile can then process &amp; enhance the page properly.</p></li>
    </ul>

</div>
<!-- /content -->

<div data-role="footer" class="jqm-footer">
    <p class="jqm-version"></p>

    <p>Copyright 2013 The jQuery Foundation</p>
</div>
<!-- /footer -->
<div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position="left" data-display="reveal"
     data-theme="c">
    <ul data-role="listview" data-theme="d" data-divider-theme="d" data-icon="false" data-global-nav="demos"
        class="jqm-list">
        <li data-role="list-divider">jQuery Mobile Demos</li>
        <li><a href="./">Home</a></li>
        <li><a href="intro/">Introduction</a></li>
        <li><a href="examples/">Demo Showcase</a></li>
        <li><a href="faq/">Questions & Answers</a></li>
        <li><a href="intro/rwd.html">Going Responsive</a></li>
        <li data-role="list-divider">Widget reference</li>
        <li data-section="Widgets" data-filtertext="accordions collapsible sets content formatting grouped inset mini">
            <a href="widgets/accordions/">Accordion</a></li>

        <li data-section="Widgets" data-filtertext="ajax navigation navigate event method"><a href="widgets/navigation/"
                                                                                              data-ajax="false">AJAX
            Navigation</a></li>

        <li data-section="Widgets"
            data-filtertext="autocomplete filter reveal listviews remote listviewbeforefilter placeholder"><a
                href="widgets/autocomplete/" data-ajax="false">Autocomplete</a></li>

        <li data-section="Widgets" data-filtertext="buttons inputs forms inline theme grouped icons mini disabled"><a
                href="widgets/buttons/" data-ajax="false">Buttons</a></li>

        <li data-section="Widgets" data-filtertext="checkboxes checkboxradio inputs forms mini disabled"><a
                href="widgets/checkbox/">Checkboxes</a></li>

        <li data-section="Widgets" data-filtertext="collapsibles content formatting"><a href="widgets/collapsibles/"
                                                                                        data-ajax="false">Collapsibles</a>
        </li>

        <li data-section="Widgets" data-filtertext="controlgroups selects checkboxradio buttons horizontal vertical"><a
                href="widgets/controlgroups/">Controlgroup</a></li>

        <li data-section="Widgets" data-filtertext="dialogs modal popups"><a href="widgets/dialog/">Dialogs</a></li>

        <li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a
                href="widgets/fixed-toolbars/">Fixed toolbars</a></li>

        <li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a
                href="widgets/sliders/switch.html" data-ajax="false">Flip switch toggle</a></li>

        <li data-section="Widgets" data-filtertext="footer toolbars footers sections"><a href="widgets/footers/">Footer
            toolbar</a></li>

        <li data-section="Widgets"
            data-filtertext="forms inputs slider button range toggle switch label disabled accessible fieldcontains elements">
            <a href="widgets/forms/">Form elements</a></li>

        <li data-section="Widgets" data-filtertext="grids columns blocks content formatting rwd responsive"><a
                href="widgets/grids/">Grids</a></li>

        <li data-section="Widgets" data-filtertext="header toolbars fixed fullscreen sections"><a
                href="widgets/headers/">Header toolbar</a></li>

        <li data-section="Widgets" data-filtertext="icons buttons disc position"><a href="widgets/icons/">Icons</a></li>

        <li data-section="Widgets" data-filtertext="links navigation ajax prefetch cache"><a
                href="widgets/links/">Links</a></li>

        <li data-section="Widgets" data-filtertext="listviews thumbnails icons nested split button collapsible ul ol"><a
                href="widgets/listviews/" data-ajax="false">Listviews</a></li>

        <li data-section="Widgets" data-filtertext="ajax loader overlay spinner pages"><a href="widgets/loader/"
                                                                                          data-ajax="false">Loader
            overlay</a></li>

        <li data-section="Widgets" data-filtertext="navbars navmenu toolbars links icons footer header"><a
                href="widgets/navbar/" data-ajax="false">Navbar</a></li>

        <li data-section="Widgets" data-filtertext="navbars persistent header footer links navmenu"><a
                href="widgets/fixed-toolbars/footer-persist-a.html">Navbar, persistent</a></li>

        <li data-section="Widgets" data-filtertext="pages single multipage templates ajax nav"><a href="widgets/pages/">Pages</a>
        </li>

        <li data-section="Widgets"
            data-filtertext="panels sliding nav modal transition display reveal overlay push rwd responsive"><a
                href="widgets/panels/">Panels <span class="ui-li-count">New</span></a></li>

        <li data-section="Widgets"
            data-filtertext="popup dialog modal transition tooltip lightbox form overlay screen flip pop fade transition">
            <a href="widgets/popup/">Popup</a></li>

        <li data-section="Widgets" data-filtertext="radiobuttons checkboxradio inputs forms disabled grouped"><a
                href="widgets/radiobuttons/">Radio buttons</a></li>

        <li data-section="Widgets" data-filtertext="selectmenus custom native multiple optgroup disabled forms"><a
                href="widgets/selects/">Select</a></li>

        <li data-section="Widgets" data-filtertext="slider, single sliders range inputs forms disabled"><a
                href="widgets/sliders/" data-ajax="false">Slider, single</a></li>

        <li data-section="Widgets" data-filtertext="slider, dual range sliders rangesliders inputs forms disabled"><a
                href="widgets/sliders/rangeslider.html" data-ajax="false">Slider, dual range <span class="ui-li-count">New</span></a>
        </li>

        <li data-section="Widgets" data-filtertext="tables column th td toggle responsive tables rwd hide show tabular">
            <a href="widgets/table-column-toggle/">Table, column toggle <span class="ui-li-count">New</span></a></li>

        <li data-section="Widgets" data-filtertext="tables reflow th td responsive rwd columns tabular"><a
                href="widgets/table-reflow/">Table, reflow <span class="ui-li-count">New</span></a></li>

        <li data-section="Widgets"
            data-filtertext="text inputs textarea numeric email tel file date time month clear pattern placeholder forms">
            <a href="widgets/textinputs/">Text inputs & textarea</a></li>

        <li data-section="Widgets" data-filtertext="page transitions animated pages ajax navigation flip slide fade pop"
            data-ajax="false"><a href="widgets/transitions/" data-ajax="false">Transitions</a></li>

    </ul>
</div>
<!-- /panel -->


</div>
<!-- /page -->
</body>
</html>
